<template>
	<view>
		<me-scroll-uni 
			:down="downOption" 
			@down="downCallback" 
			:up="upOption" 
			@up="upCallback" 
			@init="mescrollInit" 
			bottom="0" top="0">
			<view class="notice-item" v-for="(item,index) in articleList" :key="index">
				<text class="time">{{item.add_time_date}}</text>
				<view class="content">
					<view class="title ellipsis">{{item.title}}</view>
					<view class="img-wrapper">
						<image class="pic" :src="item.photo[0].images"></image>
					</view>
					<text class="introduce">
						{{item.content}}
					</text>
					<view class="bot b-t" @tap="navTo(item)">
						<text>查看详情</text>
						<view class="arrow">
							<image src="/static/icon/left-gray-arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</me-scroll-uni>
	</view>
</template>

<script>
	import meScrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	export default {
		components: {
			meScrollUni,
		},
		data() {
			return {
				articleList: [],
				cateId: 0,

				mescroll: null, // mescroll实例对象
				// 下拉刷新的常用配置
				downOption: {
					use: true, //是否启用下拉刷新;默认true
					auto: true //是否在初始化完毕之后自动执行下拉刷新的回调;默认true 
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, //是否启用上拉加载;默认true
					auto: true, //是否在初始化完毕之后自动执行上拉加载的回调,默认true
					page: {
						num: 0, //当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 6 //每页数据的数量，默认10
					},
					noMoreSize: 1, //配置列表的总数量要大于5条才显示‘--END--’的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				curPageData: []
			}
		},
		onLoad(params) {
			let self = this;
			this.cateId = params.cid;
			// 从缓存里获取文章分类列表，如果缓存里有，就不用再请求，如果没有，就请求数据，放到缓存。
			let cateList=uni.getStorageSync('gArtcileCategory');
			if(cateList.length<=0){
				// 文章分类列表
				let articleCategoryList = this.requestUrl.articleCategory;
				this.util.request(articleCategoryList, 'post', function(res) {
					if (res.data.code == 0 && res.data.data.length > 0) {
						cateList = res.data.data;
						uni.setStorageSync('gArtcileCategory',cateList);
						
					}
				});
			}
			
			// 根据文章分类信息，设置NavigationBarTitle 。
			for (let index in cateList) {
				if (cateList[index]['id'] == self.cateId) {
					uni.setNavigationBarTitle({
						title: cateList[index]['name']
					});
				}
			}
		},
		methods: {
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			// 下拉刷新的回调
			downCallback(mescroll) {
				setTimeout(function() {
					mescroll.endSuccess();
				}, 1000);
			},
			// 上拉加载的回调
			upCallback(mescroll) {
				// 此时mescroll会携带page的参数：
				let pageNum = mescroll.num; //页码，默认从1开始
				let pageSize = mescroll.size; //页长,默认每页10条
				this.loadData(pageNum, pageSize, mescroll);

			},
			// 加载文章列表，带下拉刷新和上滑加载
			loadData(pageNum = 1, pageSize = 6, mescroll = []) {
				var self = this;

				// 如果为第一页，说明起点 为 0
				var start = (pageNum - 1) * pageSize;
				var length = pageSize;

				// 获取文章信息的参数
				var param = {
					data: {
						cid: this.cateId,
						m: start, //每次调取的起点
						n: length, //每次调取的数量
					}
				};
				// 获取文章列表信息
				var articleListUrl = this.requestUrl.articleList;
				this.util.request(articleListUrl, 'post', function(res) {
					if (res.data.code == 0 && res.data.data) {
						self.curPageData = res.data.data;
						self.articleList = self.articleList.concat(self.curPageData);
						self.articleList.forEach(item=>{
							item.content = self.util.strip_tags(item.content).substring(0, 50);
						})
						
						// 最后一页了，显示end
						mescroll.endSuccess(self.curPageData.length);
					}
				}, param);
			},
			//详情
			navTo(item) {
				let id = item.id;
				let cid=item.article_category_id;
				uni.navigateTo({
					url: `/pages/article/article?id=${id}&cid=${cid}`
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	page {
		background-color: $uni-bg-color-grey;
		padding-bottom: 30upx;
	}

	.notice-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80upx;
		padding-top: 10upx;
		font-size: 26upx;
		color: #7d7d7d;
	}

	.content {
		width: 100%;
		padding: 0 24upx;
		background-color: #fff;
		border-radius: 4upx;
		box-sizing: border-box;
		
	}

	.title {
		text-align: center;
		height: 90upx;
		font-size: 32upx;
		color: #303133;
		width:100%;
		line-height: 90upx;
	}

	.img-wrapper {
		width: 100%;
		height: 260upx;
		position: relative;
	}

	.pic {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 6upx;
	}

	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		font-size: 36upx;
		color: #fff;
	}

	.introduce {
		display: inline-block;
		padding: 16upx 0;
		font-size: 28upx;
		color: #606266;
		line-height: 38upx;
	}

	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80upx;
		font-size: 24upx;
		color: #707070;
		position: relative;
	}

	.more-icon {
		font-size: 32upx;
	}

	.arrow {
		margin: 8rpx 0 0 15rpx;
	}

	.arrow image {
		width: 30rpx;
		height: 30rpx;
	}
</style>
